<template>
	<view class="search-box">
		<my-search bgcolor="green" radius="20" @click="gotoSearch"></my-search>
	</view>
	<view class="scroll-view-container">
		<scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh+'px'}">
			<view :class="['left-scroll-view-item',active==i?'active':'']" v-for="(item,i) in cateList" :key="i" @click="updateActive(i)">{{item.name}}</view>
		</scroll-view>
		<scroll-view class="right-scroll-view" scroll-y="true" :style="{height:wh+'px'}" :scroll-top="scrollTop">
			<view class="cate-l2-list" >
				<view class="cate-l2-item"  @click="gotoGoodsList(item)" v-for="(item,i) in cateLevel2" :key="i">
					<image :src="item.icon" mode="widthFix"></image>
					<p style="text-align: center;">{{item.name}}</p>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { $http } from '@escook/request-miniprogram';
import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				wh:0,
				cateList:[],
				active:0,
				cateLevel2:[],
				scrollTop:0
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight-50
			this.getCateList()
		},
		methods:{
			async getCateList(){
				const {data:res} = await $http.get("/api/public/v1/categories")
				if (res.meta.status !==200){
					uni.$showMsg()
				}else{
					this.cateList = res.message
					this.cateLevel2=this.cateList[0].children
				}
			},
			updateActive(cat_id){
				this.active=cat_id
				this.cateLevel2=this.cateList[cat_id].children
				this.scrollTop= this.scrollTop?0:1
			},
			gotoGoodsList(item){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid='+item.id
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-box{
		position: sticky;
		top: 0;
		z-index:999
	}
	.scroll-view-container{
		display: flex;
		.left-scroll-view{
			width: 120px;
			.left-scroll-view-item{
				background-color: #F7F7F7;
				line-height: 60px;
				text-align: center;
				font-size: 12px;
				&.active{
					background-color: #FFFFFF;
					position: relative;
					&::before{
						content: '';
						display: block;
						position: absolute;
						background-color: #c00000;
						width:3px;
						height:30px;
						top: 25%;
						left: 0;
					}
				}
			}
		}
		 .right-scroll-view{
			background-color: white;
			.cate-l2-list{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.cate-l2-item{
					width: 25%;
					height: 70px;
					padding: 5px;
					margin: 3px;
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 60px;
					}
					font-size: 10px;
				}
			}
			
		} 
		// .right-scroll-view{
		// 	background-color: white;
		// 	.cate-l1{
				
		// 	}
		// }
	}
</style>
